<template>
  <div>
    <ul class="added-images">
      <li class="added-image-item" v-for="el in imgList" :key="el.id">
        <f7-link class="added-image-delete" @click="delSelectedImgs(el.id)" v-if="isDelete != false">
          <i class="f7-icons">close</i>
        </f7-link>
        <div class="added-image-box backgroundImage" v-bind:class="{'radius': (isPortrait)}"
             v-bind:style="{backgroundImage:'url('+ el.thumb +')'}">
          <!--<img :src="el.thumb ? el.thumb : el.url" :alt="el.name">-->
        </div>
      </li>
      <li class="added-image-item" v-if="imgList.length < maximum">
        <div class="added-image-box add-icon">
          <i class="f7-icons">add</i>
          <input type="file" name="file"
                 :accept="inputAccept ? inputAccept : '*'"
                 class="image-add-input"
                 :id="inputElId"
                 @change="addFile"/>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import String from '../../js/mod.string';
  import Http from '../../js/mod.http';
  import ToastUtils from '../../mod/utils.toast';
  import strings from "../../assets/strings"

  export default {
    props: ['imgList', 'imgURI', 'maximum', 'isPortrait', 'inputAccept',
      'inputElId', 'isDelete', 'keepSize'],
    data() {
      return {
        maximumImagesNumber: -1,
        curSelectedURI: [],
        curSelectedUrl: [],
      }
    },
    created: function () {
      let _this = this;
    },
    computed: {},
    watch: {},
    methods: {
      delSelectedImgs: function (idname) {
        let _this = this;
        let beforeURI = _this.imgURI ? _this.imgURI : [];
        let beforeUrl = _this.imgList ? _this.imgList : [];
        let afterURI = [];
        let afterUrl = [];
        for (let i in beforeURI) {
          if (beforeURI[i] == idname) {
            continue;
          } else {
            afterURI.push(beforeURI[i]);
            afterUrl.push(beforeUrl[i]);
          }
        }
        let emailData = {
          imagesURI: afterURI,
          imagesUrlArr: afterUrl,
        };
        _this.$emit('imagesData', emailData);
      },

      addFile: function () {
        let _this = this;
        let inputObj = document.getElementById(_this.inputElId);
        let fileObj = inputObj.files[0];
        // console.log('file object : ', fileObj);
        if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
          ToastUtils.toast.show(ToastUtils.param.toast(
              {text: strings.toast["not-null"].image}));
          return;
        }
        // 开始上传
        _this.$emit('uploading', true);

        let fileName = fileObj.name;
        let fileTypeStr = fileObj.type;
        let fileTypeArr = fileTypeStr.split('/');
        let fileType = fileTypeArr[0].trim();
        let to_url = '';
        if (fileType == 'image') {
          to_url = Http.kInterfacePath.file.upload;
        } else {
          to_url = Http.kInterfacePath.file.uploadFile;
        }
        let formFile = new FormData();
        formFile.append("action", "UploadVMKImagePath");
        formFile.append("file", fileObj); //加入文件对象
        let data = formFile;
        let _errorFileUpload = (err) => {
          _this.$emit('uploading', false);
          Http.httpErrorDeal(_this, err);
        };
        let params = {
          url: to_url,
          type: Http.httpType.post,
          data: data,
          success: _successFileUpload,
          error: _errorFileUpload,
        };
        Http.ajax(_this, params);

        function _successFileUpload(res) {
          // 上传结束
          _this.$emit('uploading', false);

          let resData = res.data ? res.data : null;
          if (resData != undefined && resData != null && resData != '') {
            let imgObj = {
              id: resData.id,
              name: resData.name ? resData.name : '',
              url: resData.url,
              thumb: resData.thumb ? resData.thumb : '',
              path: resData.url,
            };
            let beforeURI = _this.imgURI ? _this.imgURI : [];
            let beforeUrl = _this.imgList ? _this.imgList : [];
            if (beforeURI.indexOf(imgObj.id) > -1) {
            } else {
              beforeURI.push(imgObj.id);
              beforeUrl.push(imgObj);
            }
            let emailData = {
              imagesURI: beforeURI,
              imagesUrlArr: beforeUrl,
            };
            _this.$emit('imagesData', emailData);
          }
        }
      },
    }
  }
</script>

<style scoped>
  .image-add-input {
    width: 70px;
    height: 70px;
    opacity: 0;
    position: absolute;
    left: 0px;
    top: 0px;
  }

  .added-images {
    overflow: hidden;
    padding: 12px;
  }

  .added-image-item {
    width: 25%;
    float: left;
    _height: 80px;
    min-height: 80px;
    position: relative;
  }

  .added-image-box {
    width: 70px;
    height: 70px;
    overflow: hidden;
    margin: 5px auto;
    border: 1px solid #e5e5e5;
    text-align: center;
  }

  .added-image-box img {
    width: 100%;
  }

  .added-image-box.backgroundImage {
    background-repeat: repeat no-repeat;
    background-size: cover;
  }

  .added-image-box.radius {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
  }

  .added-image-box.add-icon {
    text-align: center;
    text-align: -moz-center;
    text-align: -webkit-center;
    position: relative;
  }

  .added-image-box.add-icon .f7-icons {
    font-size: 36px;
    font-weight: 600;
    color: #666666;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -18px;
    margin-top: -18px;
  }

  .added-image-delete {
    width: 23px;
    height: 23px;
    overflow: hidden;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-color: #E51C23;
    position: absolute;
    right: 0px;
    top: -5px;
  }

  .added-image-delete .f7-icons {
    font-size: 14px;
    color: #fff;
    line-height: 18px;
    margin: 0px auto;
  }
</style>